<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: lightgray;
    }

    .clock {
        width: 250px;
        height: 250px;
        border-radius: 100%;
        background-color: #333;
        border: 10px solid #AAB1B0;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .line1 {
        transform: rotate(30deg);
    }

    .line2 {
        transform: rotate(60deg);
    }

    .line3 {
        transform: rotate(90deg);
    }

    .line4 {
        transform: rotate(120deg);
    }

    .line5 {
        transform: rotate(150deg);
    }

    .line6 {
        transform: rotate(180deg);
    }

    /*周围刻度*/
    .clock div:nth-child(-n+6) {
        width: 6px;
        height: 250px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -3px;
    }

    /*红色刻度*/
    .clock div:nth-child(-3n+6) {
        width: 6px;
        height: 250px;
        background-color: #ff0000;
        position: absolute;
        left: 50%;
        margin-left: -3px;
    }

    /*中心圆盘*/
    .clock_center {
        width: 225px;
        height: 225px;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #333;
    }

    /*中间圆点*/
    .clock_centerPoint {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
    }

    /*时针*/
    .hour {
        width: 6px;
        height: 50px;
        position: absolute;
        border-radius: 40%;
        top: 50%;
        left: 50%;
        margin-left: -4px;
        background-color: #fff;
        transform-origin: top center;
        animation: clockrotate 43200s steps(43200) infinite;
    }

    /*分针*/
    .minutes {
        width: 6px;
        height: 70px;
        position: absolute;
        border-radius: 80%;
        top: 50%;
        left: 50%;
        background-color: #fff;
        transform: rotate(45deg);
        transform-origin: top center;
        animation: clockrotate 3600s steps(3600) infinite;
    }

    /*秒针*/
    .seconds {
        width: 3px;
        height: 90px;
        position: absolute;
        /* border-radius: 80%; */
        top: 50%;
        left: 50%;
        margin-left: -2px;
        background-color: #ff0000;
        transform-origin: center top;
        animation: clockrotate 60s steps(60) infinite;
    }

    @keyframes clockrotate {
        form {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <div class="clock">
        <div class="line1"></div>

        <div class="line2"></div>

        <div class="line3"></div>

        <div class="line4"></div>

        <div class="line5"></div>

        <div class="line6"></div>

        <div class="clock_center"></div>

        <div class="clock_centerPoint"></div>

        <div class="hour"></div>

        <div class="minutes"></div>

        <div class="seconds"></div>

    </div>
</body>

</html>